<template>
  <div class="navbox">
  	<ul>
  		<li v-for="(nav,index) in navs" @touchstart="navname(index,nav)" :class="index==navindex?'iconactive':''">
  		  <div class="iconbox">
  		  	<div class="iconbg"><i :class="[iconfont, nav.navicon]"></i></div>
  		  </div>
  		  <h3>{{nav.navname}}</h3>
  		</li> 		
  	</ul>
  	
  </div>
</template>

<script >
export default { 
	data(){
		return{
			isActive:false,
			iconfont:'iconfont',
			navs:[{navname:'热销菜品',navicon:'icon-aixin-copy'},
			      {navname:'点过的菜',navicon:'icon-diandan'},
			      {navname:'近期活动',navicon:'icon-laba1'},
			      {navname:'服务铃',navicon:'icon-shengri_lingdang'}
			    ],
			navindex:0,
	  }
	},
	methods: {	    			   		   	    	
		navname: function (index,nav){ 	    		
			this.navindex=index;
			this.$emit('navname',index);
	  },
	}
}
</script>

<style scoped src="../assets/css/nav.css"></style>
